<template>
  <div class="home">
    <!-- 这个div作用是防止顶栏遮挡住内容 -->
    <div style="height: 3.3rem"></div>
    <!-- //顶部搜索栏 -->
    <div class="top-nav-container">
      <div class="top-nav">
        <div>昆明 <van-icon name="arrow-down" /></div>
        <div class="search-bar">
          <van-search
            v-model="keyWords"
            placeholder="请输入搜索关键词"
            shape="round"
            style="width: 100%"
          />
        </div>
      </div>
    </div>
    <!-- 内容区域 -->
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item
        v-for="(image, index) in images"
        :key="index"
        @click="jumpTo(index)"
      >
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="list-container">
      <van-divider
        :style="{
          color: '#4B9E67',
          borderColor: '#4B9E67',
          padding: '0 16px',
          margin: '5px 0',
        }"
      >
        近期热映
      </van-divider>
      <list-movie-item
        v-for="item in list"
        :key="item.id"
        :data="item"
      ></list-movie-item>
    </div>
    <div class="Nullbox"></div>
  </div>
</template>

<script>
import ListMovieItem from "../components/ListMovieItem.vue";
export default {
  components: {
    ListMovieItem,
  },
  data() {
    return {
      //搜索关键词
      keyWords: "",
      //轮播图路径
      images: [
        require("@/assets/images/green.jpg"),
        require("@/assets/images/head.jpg"),
        require("@/assets/images/pink.jpg"),
        require("@/assets/images/red.jpg"),
      ],
      list: null,
    };
  },
  methods: {
    jumpTo(index) {
      //根据轮播图index的值来跳转到相关的电影页面
      console.log(index);
      // this.$router.push("");
    },
  },
  //这个周期函数是用来把数据传递给list-item的
  beforeMount() {
    let url = "http://10.36.4.254:8080/select/HotShowFilm";
    this.axios
      .get(url)
      .then((res) => {
        this.list = res.data;
        console.log("首页接受的数据：");
        console.log(this.list);
        //10分满分制对应5颗星 把分数除以2追加到对象里
        this.list.forEach((v, i, a) => {
          v.starScore = +(v.score / 2).toFixed(1);
        });
      })
      .catch((err) => console.log(err));
  },
};
</script>
<style scoped>
.home {
  background-color: #f5f6f8;
}
.top-nav {
  position: fixed;
  z-index: 1;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 3.4rem;
  width: 100%;
  padding: 0 1rem;
  top: 0;
}
.top-nav > .search-bar {
  width: 86vw;
}
.top-nav > div:first-child {
  height: 1rem;
}
img {
  display: block;
}
.Nullbox{
  height: 4rem;
}

/* 为什么要想不开来写自适应？ */
@media (max-width: 480px) {
  .home >>> .van-swipe__track {
    height: 49.8vw;
  }
  img {
    width: 100vw;
  }
  .home {
    font-size: 3.3vw;
  }
}
@media (min-width: 480px) {
  /* 解决vant 无法修改组件的样式问题 */
  .home >>> .van-swipe__track {
    height: 49.8vw;
  }
  img {
    width: 480px;
  }
  .home {
    position: relative;
    width: 480px;
    margin-left: 50%;
    left: -240px;
  }
  .top-nav > .search-bar {
    width: 425px;
  }
  .list-item {
    height: 134.4px;
  }
}
@media (min-width: 768px) {
  .home {
    position: relative;
    margin-left: 50%;
    width: 650px;
    left: -325px;
  }
  .top-nav > .search-bar {
    width: 598px;
  }
  .home >>> .van-swipe__track {
    height: 382.46px;
  }
}
</style>


